<div class="form-group">
  <label [for]="inputId">{{title}}</label>
  <div class="input-group" [class.is-invalid]="error">
    <input class="form-control" [class.is-invalid]="error"  [placeholder]="placeholder" [id]="inputId" (dateSelect)="onChange(value)" (change)="onChange(value)"
           name="dp" [(ngModel)]="value" ngbDatepicker #datePicker="ngbDatepicker" #datePickerContent="ngModel">
    <div class="input-group-append">
      <button class="btn btn-outline-secondary calendar" (click)="datePicker.toggle()" type="button">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-calendar" viewBox="0 0 16 16">
          <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
        </svg>
      </button>
    </div>
  </div>
  <div class="invalid-feedback" i18n>Invalid date.</div>
  <small *ngIf="hint" class="form-text text-muted">{{hint}}</small>
</div>
